<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title th:text="${webinfo.webname}+'-🎵'"></title>
    <link rel="icon" th:href="'/images/'+${webinfo.webicon}"/>
    <!--bootstrap3 cdn-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!--核心js-->
    <script src="/script/js/vsPlayAudio.min.js"></script>
    <script src="/script/js/highlight.min.js"></script>
    <style>
        @media screen and (max-width: 1920px) {
            .inbox {
                width: 85%;
                margin: 15px auto 0;
                color: #c9cacc;
                background-color: #632c61;
            }
        }

        @media screen and (max-width: 1024px) {
            .inbox {
                width: 100%;
                margin: 15px auto 0;
                color: #c9cacc;
                background-color: #632c61;
            }
        }

        .btn_show {
            display: inline-block;
            width: 60px;
        }

        .btn_hidden {
            display: none;
            width: 60px;
        }

        .my-play-list ul, li {
            margin-bottom: 1px;
            padding: 0;
            font-size: 16px;
        }

        .my-play-list ul {
            overflow: hidden;
            zoom: 1;
        }

        .my-play-list ul li {
            list-style: none
        }

        .my-play-list ul li a {
            width: 350px;
            height: 50px;
            display: block;
            line-height: 50px;
            text-align: left;
            text-align: center;
            font-weight: bold;
            text-decoration: none;
            background: #633d58;
            color: #FFF;
        }

        .my-play-list ul li a:hover {
            background: #de97ff;
            color: #000;
        }
    </style>
</head>
<body class="inbox">
<div style="text-align: center;font-size: 36px;font-weight: 700;margin: 50px 0 0 0;">
    <span th:text="'欢迎来到'+${webinfo.nickname}+'的私人音乐馆'"></span>
</div>
<div style="text-align: center;font-size: 18px;margin: 50px 0 0 0;">
    <p style="line-height: 45px;">享受音乐 享受生活</p>
</div>
<div class="clear" style="margin: 50px auto 50px;width: 200px;height: 200px;border-radius: 100px;background: #fff;">
    <div>
        <embed style="position:absolute; left:0; bottom:0;" align="right" src="/files/flash.swf" width="10%"
               height="25%" type="application/x-shockwave-flash" wmode="transparent" quality="high"/>
    </div>
    <div id="vsPlayAudio" style="width: 200px;height: 200px;"></div>
</div>
<div style="text-align: center;margin: 50px 0 0 0;">
    <ul>
        <li style="display:inline-block;width: 60px;"><span class="glyphicon glyphicon-backward"
                                                            style="color: #fff; font-size: 30px;"
                                                            onclick="player.next()"
                                                            onmouseover="this.style.color='gray'"
                                                            onmouseout="this.style.color='#fff'"
                                                            title="皮一下，这也是下一首"> </span></li>
        <li id="btn_play" class="btn_hidden" hidden=""><span class="glyphicon glyphicon-play"
                                                             style="color: #fff; font-size: 30px;"
                                                             onclick="player.play()"
                                                             onmouseover="this.style.color='gray'"
                                                             onmouseout="this.style.color='#fff'" title="播放"></span>
        </li>
        <li id="btn_stop" class="btn_show"><span class="glyphicon glyphicon-pause" style="color: #fff; font-size: 30px;"
                                                 onclick="player.pause()" onmouseover="this.style.color='gray'"
                                                 onmouseout="this.style.color='#fff'" title="暂停"></span></li>
        <li style="display:inline-block;width: 60px;"><span class="glyphicon glyphicon-forward"
                                                            style="color: #fff; font-size: 30px;"
                                                            onclick="player.next()"
                                                            onmouseover="this.style.color='gray'"
                                                            onmouseout="this.style.color='#fff'" title="下一首"> </span>
        </li>
        <li style="display:inline-block;width: 60px;"><span class="glyphicon glyphicon-list"
                                                            style="color: #fff; font-size: 30px;" id="change-play-list"
                                                            onmouseover="this.style.color='gray'"
                                                            onmouseout="this.style.color='#fff'" title="切换歌单"> </span>
        </li>
        <li style="display:inline-block;width: 60px;"><span class="glyphicon glyphicon-off"
                                                            style="color: #fff; font-size: 30px;"
                                                            onclick="javascript:window.close();"
                                                            onmouseover="this.style.color='gray'"
                                                            onmouseout="this.style.color='#fff'" title="退出"> </span>
        </li>
    </ul>
    <div id="play-list" class="my-play-list" align="center" hidden="hidden">
        <ul>
            <li th:each="music : ${musics}">
                <a th:id="${music.name}" th:href="'music?code='+${music.code}" target="_self"
                   th:text="${music.name}"></a>
            </li>
        </ul>
    </div>
</div>
<script>
    /*<![CDATA[*/
    var default_playlist = [[${default_code}]];//歌单编号
    var show_list = [[${code}]];
    if (show_list != -1) {
        default_playlist = show_list;
    }
    $("#" + default_playlist).css("background", "#de97ff");
    $("#" + default_playlist).css("color", "#000");
    /*]]>*/


    $("#btn_play").click(function () {
        document.getElementById("btn_play").classList.remove("btn_show")
        document.getElementById("btn_play").classList.add("btn_hidden")

        document.getElementById("btn_stop").classList.remove("btn_hidden")
        document.getElementById("btn_stop").classList.add("btn_show")
    });

    $("#btn_stop").click(function () {
        document.getElementById("btn_stop").classList.remove("btn_show")
        document.getElementById("btn_stop").classList.add("btn_hidden")

        document.getElementById("btn_play").classList.remove("btn_hidden")
        document.getElementById("btn_play").classList.add("btn_show")
    });

    var player = new vsPlayAudio({
        music: {
            //必需项,音乐配置
            type: 'cloud',
            //必需项,网易云方式指定填'cloud'
            source: default_playlist
            //必需项,网易云音乐歌单id
            //登录网易云网页版,在网页地址中拿到
            // ... playlist?id=317921676
        },
        autoPlay: true,//自动播放
        random: false//随机播放
    });
    //初始化显示歌曲列表  如果不需要初始化展示则注释即可实现
    document.getElementById("vsPlayAudio-control").classList.add("vsPlayAudio-control-show");

    $("#change-play-list").click(function () {
        if ($('#play-list').is(':hidden')) {
            //如果隐藏时。。。
            $("#play-list").show()
        } else {
            //如果显示时。。。
            $("#play-list").hide()
        }
    });
</script>
</body>
</html>